<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f = "http://java.sun.com/jsf/core"
      xmlns:h = "http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <h:body>
        <!-- Start page, shows the products -->
        <ui:composition template="/WEB-INF/facelets/template.xhtml">
            <ui:param name="title" value="Start - Chalmers Food Store" />
            <ui:define name="content">
                <br/>
                <h1>Available products:</h1>
                <hr/>
                <h:form>
                    <p:dataTable value="#{productBackingBean.products}" var="product">
                        <!-- Name -->
                        <p:column sortBy="#{product.name}">
                            <f:facet name="header">
                                <h:outputText value="Name" />
                            </f:facet>
                            <h:outputText value="#{product.name}" />
                        </p:column>
                        <!-- Category -->
                        <p:column sortBy="#{product.cat}">
                            <f:facet name="header">
                                <h:outputText value="Category" />
                            </f:facet>
                            <h:outputText value="#{product.cat}" />
                        </p:column>
                        <!-- Description -->
                        <p:column sortBy="#{product.desc}">
                            <f:facet name="header">
                                <h:outputText value="Description" />
                            </f:facet>
                            <h:outputText value="#{product.desc}" />
                        </p:column>
                        <!-- Price -->
                        <p:column sortBy="#{product.price}">
                            <f:facet name="header">
                                <h:outputText value="Price" />
                            </f:facet>
                            <h:outputText value="#{product.price}" />
                        </p:column>
                        <!-- Add to cart button -->
                        <p:column>
                            <p:commandButton value="Add To Cart" actionListener="#{shoppingCartModelBean.addProduct(product)}" update=":cartInfo" />
                        </p:column>
                    </p:dataTable>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
